<template>
  <div class="filter-column">
    <el-input
      class="search"
      v-if="isInput"
      v-model="value"
      placeholder="请输入内容"
      clearable>
    </el-input>

    <el-select
      v-if="isSelect"
      v-model="value"
      placeholder="请选择"
      clearable @change="selectChange">
      <el-option
        v-for="item in column.options"
        :key="item[optionValue]"
        :label="item[optionLabel]"
        :value="item[optionValue]">
      </el-option>
    </el-select>

    <el-date-picker
      v-if="isDatePicker"
      v-model="value"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>

  </div>
</template>

<script>
  export default {
    props: {
      column: {
        type: Object,
        default: () => ({
          type: 'input',
          fieldName: 'content',
          value: ''
        })
      },
    },
    data() {
      return {
        value: ''
      }
    },
    computed: {
      isInput() {
        return this.column.type === 'input'
      },
      isSelect() {
        return this.column.type === 'select'
      },
      isDatePicker() {
        return this.column.type === 'datePicker'
      },
      optionLabel() {
        return this.column.optionLabel || 'label'
      },
      optionValue() {
        return this.column.optionValue || 'value'
      },
    },
    watch: {
      value: {
        immediate: true,
        handler: function() {
          this.$emit('update:column', this.value)
        }
      }
    },
    methods: {
      selectChange() {
        this.$emit('select-change', this.value)
      }
    },
  }
</script>

<style lang="scss" scoped>

  .filter-column{
    display: inline-block;
    margin-right: 10px;
    &:last-child{
      margin-right: 0;
    }
  }

  .search{
    width: 300px;
  }

</style>
